<template>
  <div class="filemanager">

   <div class="demo-progress">
  
    <el-progress type="dashboard" :percentage="30" status="success">
      <template #default="{ percentage }">
        <span class="percentage-value">{{ percentage }}%</span>
        <span class="percentage-label">Progressing</span>
      </template>
    </el-progress>
  </div>

    <el-table
      :data="tableData"
      row-key="id"
      height="250"
      style="width: 100%"
      lazy
      :load="loadChildren"
      stripe
      border
    >
      <el-table-column prop="date" label="文件名" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
      <el-table-column fixed="right" label="Operations" width="120">
        <template #default>
          <el-button type="text" size="small" @click="handleClick"
            >Detail</el-button
          >
          <el-button type="text" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "FileManager",
  data() {
    const tableData = [
      {
        id: 1,
        date: "2016-05-03",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        id: 2,
        date: "2016-05-02",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
        hasChildren: true,
      },
      {
        date: "2016-05-04",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
      {
        id: 3,
        date: "2016-05-01",
        name: "Tom",
        address: "No. 189, Grove St, Los Angeles",
      },
    ];
    return {
      percentage:50,
      tableData,
    };
  },
  methods: {
    handleClick(e) {
      console.log("click", e);
    },
    loadChildren(row, node, callback) {
      console.log("row", row);
      console.log("node", node);
      console.log("callback", callback);
      callback([
        {
          id: 31,
          date: "2016-05-01",
          name: "wangxiaohu",
        },
        {
          id: 32,
          date: "2016-05-01",
          name: "wangxiaohu",
        },
      ]);
    },
  },
  components: {},
};
</script>

<style scoped>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}
.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}
</style>
